<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      show-action
      @cancel="$router.push('/home')"
      v-model.trim="value"
      @input="realTimeSearch"
      @focus="focusSearch"
      :placeholder="defaultKeyword"
    />

    <HistorySearch
      @getTag="getTag"
      :hotKeywordList="hotKeywordList"
      :historyKeywordList="historyKeywordList"
      v-if="isShow == 1"
    />
    <KeyWordList
      @clickTag="getTag"
      :keyWordList="keyWordList"
      v-else-if="isShow == 2"
    />
    <GoodsList
      @categoryByTag="categoryByTag"
      :filterCategory="filterCategory"
      @orderByPrice="orderByPrice"
      :goodsListData="goodsListData"
      v-else
    />
    <van-row>
      <van-col class="noMore" span="24">没有更多了</van-col>
    </van-row>
  </div>
</template>

<script>
import HistorySearch from "@/components/HistorySearch";
import GoodsList from "@/components/GoodsList";
import KeyWordList from "@/components/KeyWordList";
import {
  getSearchDataAPI,
  realTimeSearchAPI,
  getGoodsListAPI,
} from "@/request/api";
export default {
  data() {
    return {
      isShow: 1,
      hotKeywordList: [],
      historyKeywordList: [],
      defaultKeyword: "",
      value: "",
      keyWordList: [],
      timer: null,
      goodsListData: [],
      order: "", //商品排序类型
      categoryId: "", //商品分类
      filterCategory: [], //商品类别列表
    };
  },
  methods: {
    //点击搜索框
    focusSearch() {
      if (this.timer != null) {
        clearTimeout(this.timer);
      }
      //防抖
      this.timer = setTimeout(async () => {
        let res = await realTimeSearchAPI({ keyword: this.value });
        this.keyWordList = res.data;
      }, 500);
    },
    //发送请求获取商品列表
    async getGoodsList() {
      let res = await getGoodsListAPI({
        keyword: this.value,
        page: 1,
        size: 20,
        order: this.order,
        categoryId: this.categoryId,
        sort: "price",
      });
      this.goodsListData = res.data.data;
      this.filterCategory = res.data.filterCategory;
    },
    //分类下拉框
    categoryByTag(val) {
      this.categoryId = val;
      this.getGoodsList();
    },
    //根据价格排序商品
    orderByPrice(val) {
      this.order = val;
      this.getGoodsList();
    },
    //获取标签内容
    getTag(value) {
      this.value = value;
      this.getGoodsList();
      this.isShow = 3;
    },
    //实时搜索
    realTimeSearch() {
      if (this.value) {
        this.isShow = 2;
      }
      this.focusSearch();
    },
  },

  async created() {
    let res = await getSearchDataAPI();
    if (res.errno != 0) return;
    let { hotKeywordList, historyKeywordList, defaultKeyword } = res.data;
    this.hotKeywordList = hotKeywordList;
    this.historyKeywordList = historyKeywordList;
    this.defaultKeyword = defaultKeyword.keyword;
  },
  components: {
    HistorySearch,
    GoodsList,
    KeyWordList,
  },
};
</script>

<style lang="less" scoped>
.noMore {
  font-size: 0.16rem;
  text-align: center;
  line-height: 0.4rem;
  color: rgba(193, 186, 186, 0.636);
}
</style>
